import * as React from 'react'
import {View, SafeAreaView, Text, Image, TextInput ,Touchable,StyleSheet, TouchableOpacity} from 'react-native'
import * as Animate from 'react-native-animatable'
import Back from '../../../../common/component/back'

const searchImg = require('../../../../common/img/search.png')

let qusTitleArr = [
  {title: "可以一次上传/ 收藏多张图片吗？"},
  {title: "上传的图片可以商业用途吗？"},
  {title: "登录遇到故障问题"},
  {title: "我的账号被冻结/禁用了？"},
]

const QusListView = ({navigation,qusTitle,url}) => {

  let uurl = url || 'HelpDetail'
  
  const styles = StyleSheet.create({
    container: {
      flexDirection: 'row',
      alignItems: 'center' ,
      fontWeight: '900',
      marginBottom: 25
    },
    title: {
      fontWeight: 'bold'
    },
    icon: {
      position: 'absolute', 
      right: 15,
      fontSize: 12, 
      fontWeight: '700'
    }
  })

  return (
    <>
    <TouchableOpacity style={ styles.container } onPress={()=>{navigation.navigate(uurl)}}>
      <Text style={ styles.title }>
        {qusTitle}
      </Text>
      <Text style={styles.icon}>></Text>
    </TouchableOpacity>
      
    </>
  )
}


class Help extends React.Component {

  constructor(props){
    super(props)
  }


  render() {

    let {navigation} = this.props;

    return(
      <SafeAreaView style={styles.container}>
        <View style={{ flex: 1 ,margin: 20}}>
          <Back navigation={navigation} witheIcon={false}></Back>

          <Text style={styles.title}>帮助反馈</Text>

          <View style={[styles.searchView]}>
            <Image source={ searchImg } style={styles.searchImg}></Image>
            <TextInput style={styles.searchInput} placeholder={"请输入你需要查找的问题"}></TextInput>
          </View>

          <Text style={styles.qusTitle}>常见问题</Text>

          <View>
            {qusTitleArr.map((item, index)=>{
              return (
                <QusListView navigation={navigation} qusTitle={item.title}  key={item+index}></QusListView>
              )
            })}
          </View>

          <TouchableOpacity style={styles.circleGray} onPress={()=>{navigation.navigate("Suggest")}}>
            <Animate.View animation="rotate" style={styles.circleBlack}>
               <Text style={{color: "rgb(255, 255, 255)",fontSize: 14,fontWeight: 'bold'}}>反馈</Text>
            </Animate.View>
           
          </TouchableOpacity>

        </View>

        
        
      </SafeAreaView>
    )
  }

}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    // margin: 20,
    backgroundColor: 'white'
  },
  title: {
    fontSize: 22,
    fontWeight: 'bold',
    marginTop: 15,
    marginBottom: 20
  },
  searchView: {
    flexDirection: 'row',
    height: 40,
    backgroundColor: 'rgb(245, 245, 245)',
    borderRadius: 20,
    paddingLeft: 50
  },
  searchImg: {
    width: 22,
    height: 22,
    position: 'absolute',
    top: 8,
    left: 13
  },
  searchInput: {
    flexGrow: 1,
    fontSize: 12
  },
  qusTitle: {
    fontSize: 12,
    color: "rgb(181, 181, 181)",
    marginTop: 20,
    marginBottom: 20
  },
  circleGray: {
    width: 52,
    height: 52,
    position: "absolute",
    bottom: 50,
    right: 20,
    backgroundColor: "rgba(16, 16, 16, 0.1)",
    borderRadius: 26 ,
    alignItems: "center",
    justifyContent: "center"
  },
  circleBlack: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: "black",
    alignItems: "center",
    justifyContent: "center",
    color: "white"
  }
})



export default Help